<template>
  <div>
    <div style="margin: 15px;text-align: center">
      <el-input class="inputDeep" placeholder="请输入名称查询" v-model="name" @keyup.enter.native="search" clearable
                style="width: 300px;"></el-input>
      <el-button style="margin-left: 5px;background-color: #f30213;color: white" @click="search"> 搜 索</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 10px">
          <div style="border: 1px solid #ccc; padding-bottom: 10px;border-radius:10px;overflow: hidden">
            <img :src="item.img" alt="" style="width: 100%;cursor: pointer;" @click="$router.push('/front/goodsDetail?id=' +item.id)">
            <div style="color: #666; padding: 10px;cursor: pointer;"><b @click="$router.push('/front/goodsDetail?id=' +item.id)">{{ item.name }}</b></div>
            <div style="padding: 10px;display: flex !important;justify-content: space-between !important;">
              <span style="color: #f30213">￥{{ item.price}}</span>
              <el-button  style="background-color: orangered;color: white;" @click="$router.push('/front/goodsDetail?id=' +item.id)">立即抢购</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
          style="text-align: center"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[16, 28,40]"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Goods",
  data() {
    return {
      name: "",
      tableData: [],
      currentPage: 4,
      pageNum: 0,
      pageSize: 8,
      total: 0,
      imgs: [
        'https://m.360buyimg.com/babel/jfs/t1/35573/1/17934/117173/6399293aE7c015b38/a5f1f6ae5dcdc01e.jpg.webp',
        'https://m.360buyimg.com/babel/jfs/t1/35573/1/17934/117173/6399293aE7c015b38/a5f1f6ae5dcdc01e.jpg',
      ],
    };
  },
  created() {
    this.load()
  },
  methods: {
    search() {
      this.load()
    },
    load() {
      this.request.get("/goods/findGoods", {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              name: this.name
            }
          }
      ).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.load()
    },
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 18px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-input {
  border-width: 2px 2px 2px 2px;
  border-color: #f30213;
  border-style: solid;
  font-size: 14px;
}

/* 利用穿透，设置input边框隐藏 */
.inputDeep >>> .el-input__inner {
  border: 0;
}
</style>